import dayjs from 'dayjs';
import { setForm } from '../form/setForm';
import { setDetailTableData, setDialogTableData, setTableData } from '../table/setTableData';
import http from '@/api';
import { getComponents, renderDynamicComponents } from '../utils/getComponents';
/** 从接口获取基础配置数据 MainDataInterface */
export const useInitConfig = () => {
  const windowFunction = useWindow('createdTable');

  // 主要的渲染参数
  let mainData = reactive<any>({
    // 主要表格
    mainTableData: {
      columns: [],
      // 表格的全局属性
      tableAttrs: {}
    },
    mainForms: {
      formArr: []
    },
    // 明细表格 (可以有多个表格)
    detailsTableData: {
      visible: false,
      activeName: '',
      details: []
    },
    // 对话框配置
    dialogTable: {
      details: []
    }
  });

  /**页面引入组件 */
  let components = reactive<any>({});
  /**页面配置参数 */
  let configPageParams = reactive<any>({
    formObj: {},
    tableRefs: {},
    formRefs: {},
    useHandleData: useHandleData,
    // 动态插入的组件页面
    components: {},
    comps: [],
    // 路由跳转
    routerPush,
    // 数值计算相关
    calculate,
    // 数组相关操作
    arrOperation,
    // axios请求
    http,
    // 自定义window相关的方法
    windowFunction,
    // 时间处理模块
    dayjs: dayjs,
    // element-plus相关方法
    el: {
      elMessage
    },
    outer: {
      fallbackCopy,
      exportData: tableExportData,
      environment: {
        getFileUrl
      }
    },
    // 引入的模块
    dynamicModes: {
      // 拼音模块
      pinyin: null,
      // 操作表单相关方法
      formUtils: null
    }
  });

  let loading = ref(false);
  const route = useRoute();

  const init = async () => {
    loading.value = true;
    const { meta } = route || {};

    const _data: any = await pageItemFindPageItem(meta.flag);

    if (!_data?.length) return;
    // console.log(_data, '_data');

    const { json } = _data.find(item => item.isMainTable === 1);

    const mainTableData: any = await setTableData(JSON.parse(json), configPageParams);
    mainData.mainTableData = mainTableData;
    // console.log(mainTableData, 'mainTableData', configPageParams);

    // 所有的非主表格
    const tableData = _data.filter(item => item.isMainTable === 0 && item.type === 'table');

    // 明细表格
    const detailTableData = tableData.filter(item => {
      const tType = JSON.parse(item.json);
      return tType?.configForm?.form?.type === 'detail';
    });

    // 弹框表格
    const popTableData = tableData.filter(item => {
      const tType = JSON.parse(item.json);
      return tType?.configForm?.form?.type === 'dialog';
    });
    // console.log(popTableData, 'popTableData', detailTableData);

    // 设置明细表格
    await setDetailTableData(detailTableData, configPageParams, mainData);

    // 设置弹框表格
    await setDialogTableData(popTableData, configPageParams, mainData);

    // 设置弹框表单
    const forms = _data.filter(item => item.type === 'form');
    // console.log(forms, "forms");
    if (forms.length) {
      setForm(forms, configPageParams, mainData);
    }

    getComponents(components, configPageParams);
    loading.value = false;
  };

  return {
    init,
    mainData,
    loading,
    configPageParams,
    renderDynamicComponents,
    components
  };
};
